<template>
<div>

  <!-- 顶部固定 -->
  <div class="headerbox">
  <!-- 搜索框 -->
   <div class="inputbox">
     <div class="innerbox">
<el-input
            placeholder="请输入文章标题关键字"
            v-model="searchcontent"
            clearable         
          >
            <el-button
              slot="append"
              icon="el-icon-search"
             
            ></el-button>
     </el-input>
     </div>
      
  </div>
   <!-- 搜索列表 -->
  <div class="search" v-if="this.searchList.length!==0">
      <ul class="searchul">
        <li class="searchli" v-for="(item,index) in searchList" :key="index" @click="getMusic(item.id)">
         <span>{{item.name}}</span>
         <span class="singer">{{item.artists[0].name}}</span>
        </li>
       
      </ul>
  </div>
  <!-- 头像 -->
  <div class="right">
 <div class="imgimg">
     <div class="imgpic">
     
    <img :src="avatarUrl"/>
     </div>
  </div>
  <!-- 昵称 -->
  <p class="name">
  {{nickname}}
  </p>
  <button class="logout" @click="logout()">退出</button>
  </div>
 
</div>
<!-- 中间 -->
 <div class="container">
   <!-- 轮播图 -->
   <div class="manypic">
      <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="(item,index) in bannerlist" :key="index">
      <el-image :src="item.imageUrl" fit="contain" style="height: 300px;" ></el-image>
    </el-carousel-item>
  </el-carousel>
   </div>
    <!-- 推荐歌单-->
   <el-row >
     <h1 class="tuijian">推荐歌单</h1>
    <div class="recomList">
   <el-image class="list"   v-for="(item,index) in musicList" :key="index" :src="item.picUrl" @click="ToMusicList(item.id)" lazy>
   </el-image>
    </div>
</el-row>
 </div> 
  
 <!-- 旁边的个人相关部分 -->
 <div class="aside">
   <div class="reList" @click="Recommend">
     <p>今日推荐</p>
     <i class="iconfont icon-tuijian"></i>
   </div>
   <div class="mylike" @click="mylikelist">
     <p>我的喜欢</p>
      <i class="iconfont icon-xihuan-copy"></i>
   </div>
   
 </div>
 <!-- 弹框我的喜欢 -->
 
 <el-dialog   :visible.sync="showlike" width="50%" center  class="likedialog">
    <div class="mylikediv">
          <el-table :data="likedata" highlight-current-row border stripe
                     @row-dblclick="playMusic" v-loading="loading" >

                <!-- <el-table-column label="#" type="index">
                    <template slot-scope="scope">
                        <img v-if="curId === scope.row.id" src="imgs/isPlay.png" alt="">
                        <p v-else>{{scope.$index+1}}</p>
                    </template>
                </el-table-column> -->

                <!-- <el-table-column v-if="false" label="id" prop="id"></el-table-column> -->

                <el-table-column label="音乐标题" prop="name"></el-table-column>

                <el-table-column label="歌手" prop="ar[0].name"></el-table-column>

                <el-table-column label="专辑名" prop="al.name"></el-table-column>

                <el-table-column label="时长"  width="80px;">
                   <template slot-scope="scope">
                <span>{{changetime(scope.row.dt)}}</span>
                </template>
                </el-table-column>

            </el-table>
    </div>
 </el-dialog>
<!-- 弹框每日推荐 -->
 
 <el-dialog   :visible.sync="showcommend" width="50%" center  class="likedialog">
    <div class="mylikediv">
          <el-table :data="RecomList" highlight-current-row border stripe
                     @row-dblclick="playMusic" v-loading="loading" >

             
                <el-table-column label="音乐标题" prop="name"></el-table-column>

                <el-table-column label="歌手" prop="ar[0].name"></el-table-column>

                <el-table-column label="专辑名" prop="al.name"></el-table-column>

                <el-table-column label="时长"  width="80px;">
                   <template slot-scope="scope">
                <span>{{changetime(scope.row.dt)}}</span>
                </template>
                </el-table-column>

            </el-table>
    </div>
 </el-dialog>

</div>

</template>
<script>

export default{
  data(){
    return{
searchcontent:"",
bannerlist:[],
musicList:[],
timelist:0,
voice:20,
isplay:true,
isvoice:true,
musicUrl:"",//音乐的地址
avatarUrl:"",
nickname:"",
showlike:false,
showcommend:false,
likedata:[],
userinfolist:{},
mylikearr:[],//我的喜欢 里面是数字
loading:false,
avapic:'',//封面
timeEnd:'',
timeStart:'',
timemax:100,//最大进度条
timeId:-1,
searchList:[],//搜索的列表
RecomList:[],//table表格里面的数据
    }
  },
  created(){
    this.getbannerList();
    this.getmusicList();
    this.getVIP();
  },
  // 可以实时监听输入框值的改变
  watch:{
    searchcontent(e){
      // 当没有输入值的时候
     if(!e.trim()){
       clearTimeout(this.timeId);
       this.timeId=setTimeout(()=>{
         this.searchList=[]
       },500);
       return;
     }
     clearTimeout(this.timeId);
     this.timeId=setTimeout(()=>{
       this.getsearch(e);
     },1000)
    }
  },
  methods:{
    // 获取VIP信息
    getVIP(){
this.$axios.get(this.api+'/vip/info',{
   withCredentials: true
}
).then((res)=>{
  console.log(res);
})
    },
    // 退出登录
    logout(){
      window.sessionStorage.setItem('userinfo',null);
      this.$axios.get(this.api+"/logout");
      this.$router.push('/music');
    },
    // 获取轮播图
    getbannerList(){
      
      this.userinfolist=JSON.parse( window.sessionStorage.getItem('userinfo'))
      this.nickname=  this.userinfolist.nickname;
      this.avatarUrl=  this.userinfolist.avatarUrl;
      this.$axios.get(this.api+'/banner').then((res)=>{
        if(res.status!==200) this.$message.error("获取失败");
        this.bannerlist=res.data.banners;
      })
    },
    // 获取推荐歌单
    getmusicList(){
        this.$axios.get(this.api+'/personalized', {
                    params: {
                        // offset: (Math.random() * 1297).toFixed(0) - 12,
                        limit: 12,
                        timestamp:1503019930000
                    },
                     withCredentials: true
                }).then(res => {
                    this.musicList = res.data.result;
                })
    },

   async mylikelist(){
      this.showlike=true;
      this.loading=true;
     const res1= await this.$axios.get(this.api+"/likelist",{
        params:{
          uid:this.userinfolist.userId,
          timestamp:1503019930000
        },
        withCredentials: true
      });
      this.mylikearr=res1.data.ids;
      // console.log(this.mylikearr);
      this.$axios.get(this.api+'/song/detail',{
        params:{
          ids:this.mylikearr.toString()
        }
      }).then((res)=>{
        // console.log(res);
        this.likedata=res.data.songs;
        this.loading=false;
      })
    },
    // 切换歌曲得到歌曲的信息
    getMusic(xid){
      window.sessionStorage.setItem('Listmusic',xid);
      this.$emit('getMusic',xid);
    },
    
    // 双击表格获取歌曲的Url
    playMusic(row, column, event){
      this.$emit('playMusic',row,this.mylikearr);    
    },
    
    // 搜索的方法
    getsearch(name){
      this.$axios.get(this.api+'/search',{
        params:{
          keywords:name,
          limit:6
        }
      }).then((res)=>{
        this.searchList=res.data.result.songs;
      })
    },
    // 点击歌单跳转页面
    ToMusicList(xid){
     this.$router.push('/musiclist/'+xid);
    },
    // 变化时间的格式
      changetime(time){
     
      time=time/1000;
      var minute=parseInt(time/60);
      if(minute<10){
        minute="0"+minute;
      }

      var second=Math.round(time%60);
      if(second<10){
        second="0"+second;
      }

      return minute.toString()+":"+second.toString();
    },
    // 获取每日推荐
    async Recommend(){
      this.showcommend=true;
      this.loading=true;
         const res1= await this.$axios.get(this.api+"/recommend/songs",{
        params:{
          timestamp:1503019930000
        },
        withCredentials: true
      });
      this.RecomList=res1.data.data.dailySongs;
     this.RecomArr=res1.data.data.dailySongs.id;
      this.loading=false;
     
    }
  }
}
</script>
<style scoped>
/* .likedialog{
  height: 500px;
 
} */

/* 搜索框 */
.search{
  display: block;
  position: absolute;
  z-index: 1000;
     
    border: 1px solid #409eff;
    border-top: none;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    /* transform: translateY(-2px); */
    background: #fff;
    margin-top: 60px;
    width: 30%;
  
    height: auto;
}
.searchli{
  height: 30px;
  width: inherit;
  /* background-color: antiquewhite; */
  line-height: 40px;
  text-align: left;
  margin-left: -40px;
  /* border-top: #fe6b00 1px solid; */
  margin-top: -15px;
  margin-bottom: 15px;
  padding: 5px;
}
.searchli:hover{
  background-color: #f0f0f5;
}
.singer{
  float: right;
}
.mylikediv{
  height: 500px;
  overflow: auto;
}
.headerbox{
  width: 100%;
  height: 70px;
  display: flex;
  /* background-color:blue ; */
  /* position: fixed; */
  /* z-index: 2; */
  /* top: 0; */
}
.inputbox{
  flex: 2;
  /* background-color: aqua; */
  margin-top: -40px;
  
}
.innerbox{
  width: 60%;
   position: relative;
}
.right{
   flex: 1;
   display: flex;
  /* background-color: beige; */
}
.imgimg{
  flex: 1;
  /* background-color: darkorchid; */
}
.imgpic{
 
  width:60px;
  height: 60px;
  /* background-color: darkred; */
 border: 1px solid sandybrown;
 box-shadow: 0 0 10px #ddd;
  border-radius: 50%;
  /* margin-top: 20px; */
 
}
.imgpic img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
   display: block;
  /* margin-top: -30px; */
}
.name{
  flex: 1;
  /* background-color: aquamarine; */
  line-height: 30px;
}
.logout{
  width: 90px;
  height: 40px;
  margin: auto;
}
li{
  list-style: none;
  
  margin: 20px;
}
.list{
  /* float: left; */
  margin: 10px;
  /* background-color: rgb(79, 161, 161); */
  /* border: 1px solid salmon; */
  width: 14%;
  height: 14%;
}
.recomList{
  /* background-color: aquamarine; */
  margin-top: -60px;
}
.tuijian{
 /* background-color: aqua; */
 height: 50px;
     line-height: 50px;
    margin-bottom: 31px;
    text-align: start;
    padding-left: 20px;
}
.el-image{
  overflow:visible;
  line-height: 100px;
}
.aside{
  height: 500px;
  width: 43px;
  background-color: rgb(218, 224, 230);
  position: sticky;
    /* overflow: hidden; */
    margin-top: -500px;
    z-index: 2;
    margin-left: 98%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.aside p{
  text-align: center;
  line-height: 50px;
  font-size: 15px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  
}
.aside i{
  height: 20px;
  width: 20px;
  /* background-color: aliceblue; */
  padding: 0;
 display: block;
 margin-top: -60px;
 margin-left: 10px;
}
.reList{
  flex: 1;
  cursor: pointer;
  background-color: antiquewhite;
}
.mylike{
  flex: 1;
  cursor: pointer;
}
.myList{
  flex: 1;
  cursor: pointer;
}
.iconfont{
  color:#d81e06;
}
.footer{
  background-color: aquamarine;
  height: 8%;
  width: 76%;
  bottom: 0;
  position: fixed;
}
.ge{
  background-color: antiquewhite;
  line-height:normal;
}
.yindiv{
  background-color: rgb(171, 171, 184);
   line-height:normal;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

  /* background-color: rgb(124, 124, 114); */
  

.gequ{
  font-size: 40px;
}
.timeslider{
  width: 70%;
  margin-left: 10px;
}

.tiaodiv{
  display: flex;
  background-color: rgb(50, 114, 93);
  flex-direction: row;
  justify-content: space-around;
  align-items:center;
   line-height:normal;
}
.gequimg{
  line-height: normal;
  border:1px solid #eee;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.gequimg :hover{
  background-color: rgb(182, 178, 178);
}
.gequimg img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.voiceslider{
  width: 40%;
}
</style>
